<template>
  <div class="user">
    <!--搜索表单-->
    <div class="common-seach-wrap">
      <el-form
        size="small"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
      >
        <el-form-item
          ><el-input
            size="small"
            v-model="searchForm.userId"
            placeholder="请输入用户id"
          ></el-input
        ></el-form-item>
        <el-form-item
          ><el-input
            size="small"
            v-model="searchForm.userName"
            placeholder="请输入用户名"
          ></el-input
        ></el-form-item>
        <el-form-item
          ><el-input
            size="small"
            v-model="searchForm.loginIp"
            placeholder="请输入登录ip"
          ></el-input
        ></el-form-item>
        <el-form-item>
          <el-select
            style="width: 180px"
            size="small"
            v-model="searchForm.clientType"
            placeholder="请选择登录端"
            clearable
          >
            <el-option
              v-for="(item, index) in clientTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            size="small"
            v-model="date"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="Search"
            @click="searchSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table
          size="small"
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="userId" label="用户id"></el-table-column>
          <el-table-column prop="userName" label="用户名"></el-table-column>
          <el-table-column prop="loginIp" label="登陆ip"></el-table-column>
          <el-table-column label="登陆端">
            <template #default="scope">
              <div>
                {{
                  clientTypeList.find((v) => v.value === scope.row.clientType)
                    .label
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="登录方式">
            <template #default="scope">
              <div>
                {{
                  loginTypeList.find((v) => v.value === scope.row.loginType)
                    .label
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="loginTime" label="登陆时间"></el-table-column>
        </el-table>
      </div>

      <!--分页-->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="curPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalDataNumber"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import UserApi from "@/api/user.js";
export default {
  components: {},
  inject: ["reload"],
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      date: [],
      /*横向表单数据模型*/
      searchForm: {
        userId: "",
        userName: "",
        loginIp: "",
        clientType: "",
        startDate: "",
        endDate: "",
      },
      clientTypeList: [
        {
          label: "微信小程序",
          value: 0,
        },
        {
          label: "app",
          value: 1,
        },
      ],
      loginTypeList: [
        {
          label: "微信授权",
          value: 0,
        },
        {
          label: "手机号登录",
          value: 1,
        },
      ],
      /*是否打开添加弹窗*/
      open_add: false,
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {},
    };
  },
  created() {
    /*获取列表*/
    this.getTableList();
  },
  methods: {
    /*搜索*/
    searchSubmit() {
      this.curPage = 1;
      this.getTableList();
    },

    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getTableList();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },

    /*获取列表*/
    getTableList() {
      let self = this;
      if (self.date && self.date.length > 1) {
        self.searchForm.startDate = self.date[0];
        self.searchForm.endDate = self.date[1];
      } else {
        self.searchForm.startDate = "";
        self.searchForm.endDate = "";
      }
      let Params = {
        pageIndex: self.curPage,
        pageSize: self.pageSize,
        ...self.searchForm,
      };

      UserApi.loginLog(Params, true)
        .then((res) => {
          self.loading = false;
          self.tableData = res.data.records;
          self.totalDataNumber = res.data.total;
        })
        .catch((error) => {});
    },

    /*打开添加*/
    addClick() {
      this.$router.push("/auth/user/add");
    },

    /*打开编辑*/
    editClick(row) {
      let self = this;
      this.$router.push({
        path: "/auth/user/edit",
        query: {
          shop_user_id: row.shop_user_id,
        },
      });
    },

    /*刷新*/
    refresh() {
      this.reload();
      // 直接使用reload方法
    },

    /*删除*/
    deleteClick(row) {
      let self = this;
      ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          self.loading = true;
          AuthApi.userDelete(
            {
              shop_user_id: row.shop_user_id,
            },
            true
          )
            .then((data) => {
              self.loading = false;
              if (data.code == 1) {
                ElMessage({
                  message: "恭喜你，该管理员删除成功",
                  type: "success",
                });
                //刷新页面
                self.getTableList();
              } else {
                self.loading = false;
              }
            })
            .catch((error) => {
              self.loading = false;
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style></style>
